<template>
	<view class="tui-maps-container">
		<map class="tui-map" :latitude="lat" :longitude="lng" :markers="covers" show-location @markertap="marker" :scale="12">
			<!-- #ifndef MP-ALIPAY -->
			<!-- <cover-image class="tui-cover-back" src="/static/images/layout/icon_back_3x.png" @tap.stop="back" /> -->
			<!-- #endif -->
		</map>

		<view class="tui-box">
			<tui-list-cell :arrow="true" padding="0" :lineLeft="false" unlined>
				<view class="tui-cell-header">
					<view class="tui-cell-title font-color-main">拜访签到</view>
					<view class="tui-cell-sub font-color-theme"></view>
				</view>
			</tui-list-cell>

			<tui-list-cell padding="0" unlined>
				<view class="tui-goods-item">
					<!-- <image :src="item.avatar" class="tui-goods-img"></image> -->
					<view class="tui-goods-center">
						<view class="tui-good-info">
							<view class="tui-goods-name">{{merchantName}}</view>
							<!-- <tui-tag margin="0 0 0 20rpx  " padding="8rpx" size="24rpx" type="light-orange">
								{{item.levelName}}
							</tui-tag> -->
						</view>

						<!-- <view class="tui-goods-attr">电话：{{item.phone}}</view>-->
						<!-- <view class="tui-goods-attr">地址：{{item.shopAddress}}</view> -->
					</view>
					<!-- <view class="tui-price-right font-color-red">
						<view>￥{{item.amount}}</view>
						<view>￥0</view>
					</view> -->
				</view>
			</tui-list-cell>

			<view class="tui-clock" @tap="doClock">
				<view class="tui-clock-bg-1">
					<view class="tui-clock-bg-2">
						<text>打卡\n签到</text>
					</view>

				</view>
				<!-- <tui-icon name="applets" color="#07c160" :size="44" unit="rpx"></tui-icon> -->
			</view>

		</view>
	</view>
</template>

<script>
	//小程序需要在后台添加业务域名 https://apis.map.qq.com
	import QQMapWX from '@/libs/qqmap-wx-jssdk.min.js'
	import {
		getTaskInfo,
		finishTask
	} from "@/apis/user";
	export default {
		data() {
			return {
				inputShowed: false,
				inputVal: '',
				qqmapsdk: null,
				key: 'W4WBZ-TUD65-IDAIR-QPM36-HMFQ5-CGBZP',
				lat: 0,
				lng: 0,
				covers: [],
				address: [],
				scrollH: 256,
				pageIndex: 1,
				loading: true,
				pullUpOn: true,
				keywords: '',
				id: '',
				merchantId: '',
				merchantName: '',
				taskInfo: {}
			};
		},
		onLoad(options) {
			setTimeout(() => {
				this.qqmapsdk = new QQMapWX({
					key: this.key
				});
				this.getLocation();
			}, 100)
		},
		onShow() {
			this.id = this.$yroute.query.id;
			this.merchantId = this.$yroute.query.merchantId;
			this.merchantName = this.$yroute.query.merchantName;
			this.getDetail();
		},
		methods: {
			getDetail: function() {
				let that = this;
				const id = this.id;
				if (!id) {
					that.tui.toast("任务不存在！")
					
					return;
				}
				getTaskInfo(id).then((res) => {
						this.taskInfo = res.data;

					})
					.catch((err) => {
						uni.showToast({
							title: err.response.data.msg,
							icon: "none",
							duration: 2000,
						});
					});

			},
			getLocation(callback) {
				//当前位置
				const that = this;
				//H5：使用坐标类型为 gcj02 时，需要配置腾讯地图 sdk 信息（manifest.json -> h5）
				uni.getLocation({
					type: 'gcj02',
					altitude: true,
					success(res) {
						that.lat = res.latitude;
						that.lng = res.longitude;
					},
					fail(res) {
						console.log(res)
						that.lat = 0;
						that.lng = 0;
					}
				});
			},
			doClock: function() {
				let that = this;
				const id = this.id;
				if (!id) {
					uni.showToast({
						title: "任务id不存在",
						icon: "none",
						duration: 2000,
					});
					return;
				}
				if (that.lat == 0 || that.lng == 0) {
					that.tui.toast("无法获取位置信息，无法打卡！");
					return;
				}

				let data = {
					taskId: that.id,
					lat: that.lat,
					lng: that.lng
				};
				finishTask(data).then(res => {
					that.tui.toast("签到成功！")
					this.$yrouter.back();
				}).catch(err => {
					console.log(err)
					uni.showToast({
						title: err.msg,
						icon: 'none',
						duration: 2000,
					})
				})
			}


		}
	};
</script>

<style>
	page {
		height: 100%;
	}

	.tui-box {
		background-color: #fff;
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: column;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-list-cell {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.tui-list-cell::after {
		content: '';
		position: absolute;
		border-bottom: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		bottom: 0;
		right: 0;
		left: 30rpx;
	}

	.tui-cell-last::after {
		border-bottom: 0;
	}

	.tui-maps-container {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.tui-map {
		width: 100%;
		height: 600rpx;
		display: block;
	}

	.tui-cover-back {
		width: 60rpx;
		height: 60rpx;
		position: fixed;
		/* #ifdef H5 */
		top: 30rpx;
		/* #endif */
		/* #ifndef H5 */
		top: 60rpx;
		/* #endif */
		left: 30rpx;
	}

	.tui-cell-header {
		width: 100%;
		height: 74rpx;
		padding: 30rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tui-cell-title {
		font-size: 30rpx;
		line-height: 30rpx;
		font-weight: 600;
		color: #333;
	}

	.tui-cell-title::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		border-left: 4rpx solid #2FCC71;
		height: 100%;
	}

	.tui-cell-sub {
		font-size: 26rpx;
		font-weight: 400;
		color: #999;
		padding-right: 28rpx;
	}

	.tui-goods-item {
		width: 100%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}

	.tui-goods-center {
		flex: 1;
		padding: 20rpx 8rpx;
		box-sizing: border-box;
	}

	.tui-goods-name {
		max-width: 310rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 30rpx;
		font-weight: 600;
		line-height: 32rpx;
		color: #333;
	}

	.tui-goods-attr {
		font-size: 24rpx;
		color: #999;
		line-height: 32rpx;
		padding-top: 10rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-good-info {
		width: 100%;
		display: flex;
	}

	.tui-goods-img {
		width: 120rpx;
		height: 120rpx;
		display: block;
		flex-shrink: 0;
	}

	.text {
		color: #333;
		font-size: 24rpx;
		line-height: 30rpx;
	}

	.tui-clock {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 100rpx;
		z-index: 999;
		padding: 20rpx 25rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-clock text {
		font-size: 38rpx;
		padding-left: 10rpx;
		color: #fff;
	}

	.tui-clock-bg-1 {
		width: 188rpx;
		height: 188rpx;
		border-radius: 94rpx;
		background: #CDF6E2;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tui-clock-bg-2 {
		width: 164rpx;
		height: 164rpx;
		border-radius: 94rpx;
		background: #2FCC71;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
